<template>
  <div class="main">
    <all-header :title="$route.meta.title" />
    <div class="con" v-if="givedetail">
      <div class="top">
        <div class="top_left">
          <img :src="setting.file_url + givedetail.photo" alt="" />
          <div class="name">
            <div class="title">{{ givedetail.name }}</div>
            <div class="pu">
              <img :src="setting.file_url + givedetail.avatar" alt="" />
              <div class="pu_name">{{ givedetail.username }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/image/my/mores.png" alt="" />
        </div>
      </div>
      <div class="text">
        <div class="item">
          <div class="left">作品编号</div>
          <div class="right">{{ givedetail.no }}</div>
        </div>
        <div class="item">
          <div class="left">受赠人</div>
          <div class="right">{{ givedetail.give_username }}</div>
        </div>
        <div class="item">
          <div class="left">受赠人地址</div>
          <div class="right flex" @click="copy(givedetail.give_wallet_addr)">
            <div>{{ fun.addr(givedetail.give_wallet_addr, "user") }}</div>
            <img src="../../assets/image/goods/copy.png" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="left">受赠时间</div>
          <div class="right">{{ givedetail.give_time }}</div>
        </div>
        <div class="item">
          <div class="left">链上标识</div>
          <div class="right flex" @click="copy(givedetail.token)">
            <div>{{ givedetail.token?fun.addr(givedetail.give_wallet_addr, "user"):'上链中' }}</div>
            <img src="../../assets/image/goods/copy.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Toast } from "vant";
import commonStore from "../../store/common";
import marketStore from "../../store/market";
import { useRoute } from "vue-router";
import fun from "../../assets/fun";
import useClipboard from "vue-clipboard3";

const route = useRoute();
const id = route.params.id;

const common = commonStore();
const market = marketStore();
const setting = computed(() => common.setting);

let givedetail = ref("");
const getGiveDetail = () => {
  Toast.loading("加载中");
  market.getGiveDetail({ id: id }).then((res) => {
    givedetail.value = res;
    Toast.clear();
  });
};

const { toClipboard } = useClipboard();
const copy = async (value) => {
  try {
    await toClipboard(value);
    Toast.success("复制成功");
  } catch (e) {
    Toast.fail("复制失败");
  }
};

getGiveDetail();
console.log(id);
</script>

<style lang="scss" scoped>
.main {
  padding-top: 1.3462rem;
}
.con {
  padding: 0.3846rem;
  width: 77%;
  border-radius: 0.3846rem;
  box-shadow: 0.0962rem 0.0962rem 0.3846rem 0.1923rem #f3f5f6;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .name {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 1.1538rem;
    padding: 0.1923rem;
    .title {
      font-size: 0.3846rem;
      font-weight: bold;
    }
  }
  .top_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 1.3462rem;
      height: 1.3462rem;
      border-radius: 0.1923rem;
      margin-right: 0.0962rem;
    }

    .pu {
      display: flex;
      align-items: center;
      font-size: 0.2308rem;
      color: #959595;
      img {
        width: 0.3846rem;
        height: 0.3846rem;
        border-radius: 0;
      }
    }
  }

  .right {
    img {
      width: 0.3846rem;
      height: 0.3846rem;
    }
  }
}

.flex {
  display: flex;
  align-items: center;
}

.text {
  padding-bottom: 0.3846rem;
  padding-top: 0.3846rem;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.3846rem;
    img {
      width: 0.2885rem;
      height: 0.2885rem;
      display: inline-block;
      margin-left: 0.0577rem;
    }

    .left {
      font-weight: bold;
      font-size: 0.2885rem;
      color: #959595;
    }
    .right {
      font-weight: bold;
      font-size: 0.25rem;
    }
  }
}
</style>